import React from 'react'
import PropTypes from 'prop-types'
import {routerRedux} from 'dva/router'
import {connect} from 'dva'
import {Card, message, Row} from 'antd'
import {Page} from 'components'
import queryString from 'query-string'
import List from './components/List'
import Filter from './components/Filter'


const FundRecords = ({
                       location, dispatch, fundRecords, loading,
                     }) => {
  const {query, pathname} = location
  const {
    list, pagination, selectedRowKeys, todayTotalIncome, ytodayTotalIncome, empDataSource: dataSource, departments,
  } = fundRecords

  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['fundRecords/query'],
    pagination,
    location,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },

    onDeleteItem (id) {
      dispatch({
        type: 'fundRecords/delete',
        payload: id,
      })
        .then(() => {
          handleRefresh({
            current: (list.length === 1 && pagination.current > 1) ? pagination.current - 1 : pagination.current,
          })
          message.success("删除成功")
        })
    },
    onEditItem (item, disable) {
      dispatch({
        type: 'fundRecords/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
          disable,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'fundRecords/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
      onSelect: (record) => {
        dispatch({
          type: 'fundRecords/updateState',
          payload: {
            selectRecord: record,
          },
        })
      },
    },
  }


  const filterProps = {
    dataSource,
    handleSearch (key) {
      if (key) {
        dispatch({
          type: 'fundRecords/searchEmp',
          payload: {
            key,
          },
        })
      }
    },
    departments,
    todayTotalIncome,
    ytodayTotalIncome,
    filter: {
      ...query,
    },
    onFilterChange (value) {
      handleRefresh({
        ...value,
        current: 1,
      })
    },
    onAdd () {
      dispatch({
        type: 'fundRecords/showModal',
        payload: {
          modalType: 'create',
          disable: false,
        },
      })
    },
  }

  return (
    <div>
      <Row gutter={24}>
        <Card style={{marginBottom: 12}}>
          <Filter {...filterProps}/>
        </Card>
      </Row>
      <Row gutter={24}>
        <Page inner>
          <List {...listProps} />
        </Page>
      </Row>
    </div>
  )
}

FundRecords.propTypes = {
  employee: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({fundRecords, loading}) => ({fundRecords, loading}))(FundRecords)
